<template>
  <div class="dashboard-container">
    <el-card class="headertime">
      <i class="el-icon-date colorgroup-a"></i>{{ time }}&ensp;&ensp;&ensp;{{
        week
      }}</el-card
    >
    <div v-for="item in restxt" :key="item.time">
      <div class="time">{{ item.time }}</div>
      <div class="mine" v-if="item.type == 'mine'">
        {{ item.ctx }}
      </div>
      <div class="gpt" v-if="item.type == 'gpt'" v-html="item.ctx"></div>
    </div>
    <el-card>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" v-model="inputtxt">
          <template slot="append"
            ><i class="el-icon-s-promotion" @click="getAIResfunc"></i
          ></template>
        </el-input>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import { getAIRes } from "@/api/ai";
export default {
  name: "dashboard",
  data() {
    return {
      temp: null,
      inputtxt: "",
      time: moment().format("YYYY-MM-DD HH:mm:ss"),
      restxt: [],
      week: {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        0: "星期天"
      }[
        moment()
          .startOf("day")
          .day()
      ]
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.temp = setInterval(() => {
      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.temp);
  },
  methods: {
    getAIResfunc() {
      this.restxt.push({
        type: "mine",
        ctx: this.inputtxt,
        time: moment().format("YYYY-MM-DD HH:mm:ss")
      });

      const text = this.inputtxt;
      getAIRes({ text }).then(res => {
        if (res.code == "200") {
          let target = res.body.substring(1)
          target = target.replace(/\n/g, "<br/>");
          this.restxt.push({
            type: "gpt",
            ctx: target,
            time: moment().format("YYYY-MM-DD HH:mm:ss")
          });
          this.inputtxt = "";
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .headertime {
    background: #fff;
    margin-top: 6px;
    color: #333;
  }
  .colorgroup {
    &-a {
      color: #b2bff9;
      margin-right: 15px;
    }
  }
}
.time {
  margin: 10px 0 0 10px;
}
.mine {
  background: #b2f9b888;
  margin: 0 10px 10px 10px;
  padding: 10px;
  border-radius: 5px;
}
.gpt {
  background: #fff7ac88;
  margin: 0 10px 10px 10px;
  padding: 10px;
  border-radius: 5px;
}
</style>
